Skip to main content

🧭 Menu & Navigation

Side Menu​

The Side Menu component lets you create a dedicated navigation panel within your application. With full control over colors, fonts, and branding elements, you can design a side menu that fits seamlessly with your app’s theme.

Overview​

  • Single-Level Navigation: The side menu provides a single-level list of navigation items—ideal for straightforward app structures.
  • Customizable Look & Feel: No default styles are applied, so you can tailor the design using your preferred colors, fonts, and layout.
  • Responsive Behavior: The side menu is designed to adapt to different screen sizes, ensuring a smooth experience on both desktop and mobile.

1. Adding the Side Menu​

  1. Locate the Side Menu component in the component library (under Menu & Navigation) and drag it onto your app canvas.
  2. Typically, the side menu is placed on the left edge of the screen. Adjust the layout if needed (e.g., top, left, or right edges). Once placed, you’ll see the Side Menu in the canvas preview, ready for configuration.

2. Configuring Menu Items​

  1. Select the side menu component to reveal its settings panel.
  2. Click Add Menu Item to create a new navigation entry.
  • Label: The text that appears in the menu.
  • Icon (optional): Choose an icon from the icon library or upload a custom one.
  • Screen/Action: Specify the target screen (within the app) to navigate to.
  1. Side Placement
  • Choose whether the menu is anchored on the Left or Right side of the screen.
  • If you enable responsive or adaptive layouts, the side menu can slide in from the selected edge on smaller screens.
  1. Optional Underline Type

In the settings panel, you can enable an Underline style for each menu item. This creates a thin line under each label, providing a clear visual separation. You can choose: Full, Inset, None

info

Note: Since the side menu is strictly single-level, there is no nested navigation structure. Each menu item links directly to a single screen or action.

3. Styling & Appearance​

Because there are no default styles, you have complete control over the look and feel:

  • Colors & Fonts: In the right settings panel, choose your preferred background color, text color, border, shadow, corners and font family.
  • Menu Width & Alignment: Adjust the width of the side menu, as well as the alignment of items (left, center, or right).

Use the Adaptive Layout to ensure the menu appears properly on mobile devices—such as automatically hiding the side menu until a “hamburger” icon is clicked.

4. Preview the Side Menu​

  1. Pick the screen you want to display when the user taps the menu item.
  2. Click the Preview button in the top-right corner to test your navigation flow.
  3. Rearrange items, add icons, or rename labels as needed to ensure a clear navigation experience.

Tips & Best Practices​

  • Use Icons Wisely: Combine short labels with recognizable icons to enhance clarity.
  • Keep It Clean: There is no maximum number of items, but adding too many may impact usability.
  • Responsive Testing: Preview on multiple devices or screen sizes to confirm that the side menu is accessible and visually appealing.
  • No Sub-menus: The side menu does not support sub-menus or nested navigation levels. Currently, menu items can only navigate to screens within your AppStruct project.

Tab Bar​

The Tab Bar component provides a clean and easy way to navigate between different screens within your app. Each tab is linked to a specific screen, and the active tab changes its color to visually highlight the currently selected section.

Overview​

  • Single-Level Navigation: The tab bar is ideal for simple, one-level navigation where each tab links to a specific screen.
  • Icon & Label Customization: Customize the icons and labels for each tab. You can adjust the icon's position (top or bottom) and change colors for each tab.
  • Active Tab Highlighting: The active tab changes its color when selected, making it easy for users to know which section they are currently viewing.
  • Responsive Design: The tab bar adjusts for mobile and desktop devices, with options to stack tabs vertically or adapt to different layouts.

1. Adding the Tab Bar​

  1. Locate the Tab Bar component in the component library (under Menu & Navigation) and drag it onto your app canvas.
  2. Position the Component: By default, the tab bar will appear at the bottom of the screen. You can adjust the size and positioning using the settings panel.

2. Configuring Tab Items​

  1. Select the tab bar component to reveal its settings panel.
  2. Click Add Tab to create a new tab. For each tab, you can specify the following:
    • Label: The text that appears beneath the icon.
    • Icon (optional): Choose an icon from the icon library or upload a custom one.
    • Link: Specify which screen the tab links to within your app.

3. Layout & Icon Positioning​

  • Choose from the following layouts for each tab:
    • Icon Top: The icon appears above the label.
    • Icon Bottom: The icon appears below the label.
    • Hide Icon: Option to hide the icon but keep the label visible.
    • Hide Label: Option to hide the label and only display the icon.
  • The Icon Top and Icon Bottom layout options give you full control over how the tabs appear.
  • The currently active tab will have its color changed. You can customize the Active Color in the right bar to match your design.

4. Styling & Customization​

The Tab Bar allows full customization of its appearance to fit your app’s branding:

  • Colors:
    • Background Color: Set the background color of the tab bar.
    • Text Color: Choose the color for the tab labels.
    • Icon Color: Change the color of the tab icons.
    • Active Color: Customize the color of the active tab to help users quickly identify the selected section.
  • Borders & Shadow: Enable borders or shadows for the tab bar to create a more pronounced visual effect.
  • Corners: Adjust the corner radius to create rounded edges for the tab bar.

Best Practices​

  1. Use Descriptive Labels: Ensure that your tab labels are clear and concise so users can easily navigate your app.
  2. Choose Icons Carefully: Select icons that complement the labels and visually represent the function of each tab.
  3. Responsive Testing: Test your app on multiple devices to ensure the tab bar displays correctly and is easy to interact with.
  4. Mobile vs. Desktop: The Tab Bar adapts automatically based on screen size. On mobile devices, tabs may stack vertically, while on desktop, they are typically displayed horizontally.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].